<template>
  <div class="aside">
    <el-menu
      :default-active="path"
      style="text-align: center"
      @select="handleSelect"
    >
      <div
        class="aside_work"
        style="
          padding-top: 20px;
          background-color: rgb(31, 45, 63);
          border: none;
          margin-left: -12px;
        "
      >
        <el-menu-item index="1">
          <router-link to="/workbeach">
            <span class="iconfont icon-gongzuotai"></span>
            <span> 工作台</span>
          </router-link>
        </el-menu-item>
      </div>
      <div
        class="aside_statis"
        style="padding-top: 10px; background-color: rgb(31, 45, 63)"
      >
        <el-menu-item index="2">
          <router-link to="/datacount">
            <span class="iconfont icon-tongji" /> <span>数据统计</span>
          </router-link>
        </el-menu-item>
      </div>

      <div
        class="aside_order"
        style="padding-top: 10px; background-color: rgb(31, 45, 63)"
      >
        <el-menu-item index="3">
          <router-link to="/order">
            <span class="iconfont icon-dingdan" />
            <span>订单管理</span>
          </router-link>
        </el-menu-item>
      </div>

      <div
        class="aside_set_meal"
        style="padding-top: 10px; background-color: rgb(31, 45, 63)"
      >
        <el-menu-item index="4">
          <router-link to="/meal">
            <span
              style="font-size: 17px; padding-left: 3px"
              class="iconfont icon-basesalescardPackage"
            />
            <span style="padding-left: 2px">套餐管理</span>
          </router-link>
        </el-menu-item>
      </div>

      <div
        class="aside_dish"
        style="padding-top: 10px; background-color: rgb(31, 45, 63)"
      >
        <el-menu-item index="5">
          <router-link to="/dish">
            <span class="iconfont icon-caipinguanli" /> <span>菜品管理</span>
          </router-link>
        </el-menu-item>
      </div>

      <div
        class="aside_category"
        style="padding-top: 10px; background-color: rgb(31, 45, 63)"
      >

          <el-menu-item index="6">
             <router-link to="/category">
            <span style="font-size: 14px" class="iconfont icon-fenleiguanli" />
            <span style="padding-left: 2px">分类管理</span>
             </router-link>
          </el-menu-item>

      </div>

      <div
        class="aside_emp"
        style="padding-top: 10px; background-color: rgb(31, 45, 63)"
      >

          <el-menu-item index="7">
             <router-link to="/emp">
            <span
              style="font-size: 18px"
              class="iconfont icon-yuangongguanli"
            />
            <span>员工管理</span>
              </router-link>
          </el-menu-item>

      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'asideIndex',
  data () {
    return {
      path: '1'
    }
  },

  mounted () {
    this.handleSelect()
  },
  methods: {
    // 实时获取item选中状态

    handleSelect (index, indexPath) {
      const path = this.$route.path
      if (path === '/workbeach') {
        this.path = '1'
      } else if (path === '/datacount') {
        this.path = '2'
      } else if (path === '/order') {
        this.path = '3'
      }
      if (path === '/meal') {
        this.path = '4'
      } else if (path === '/dish') {
        this.path = '5'
      } else if (path === '/category') {
        this.path = '6'
      } else if (path === '/emp') {
        this.path = '7'
      }
    }
  }
  /*  watch () {
    //
  } */
}
</script>

<style lang="less" scoped>
.el-menu {
  width: 200px;
}
.aside {
  border: none;
  background-color: rgb(31, 45, 63);

  height: 100%;
}
/* 设置鼠标悬停时的背景颜色 */
/* .el-menu-item:hover {
  background-color: #ccc;
} */
// 选中变色
/deep/ .el-menu-item.is-active {
  /* color: rgb(31,45,63) !important; /* 替换为你想要的颜色 */
  color: orange !important;
}
/* 确保未选中状态的样式 */
.router-link-exact-active.router-link-active{
  color: orange !important;
}

/* 当鼠标悬停时更改背景和文字颜色 */
 /deep/ .el-menu-item:hover {
  background-color: rgba(204, 204, 204, 0.315); /* 更改鼠标划过的背景色 */
  color: #fff; /* 更改鼠标划过的文字颜色 */
}

</style>
